import { Component, OnInit } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
import { map } from 'rxjs/operators';

@Component({
  selector: 'theme-switcher',
  templateUrl: './theme-switcher.component.html',
  styleUrls: ['./theme-switcher.component.scss']
})
export class ThemeSwitcherComponent implements OnInit {

  themes = [
    {
      value: 'default',
      name: 'Light',
      icon: 'sun-outline',
    },
    {
      value: 'dark',
      name: 'Dark',
      icon: 'moon-outline',
    },
    {
      value: 'cosmic',
      name: 'Cosmic',
      icon: 'color-palette-outline',
    },
  ];

  currentTheme = 'default';

  constructor(private themeService: NbThemeService) {}

  changeTheme(themeName: string) {
    this.themeService.changeTheme(themeName);
  }

  ngOnInit() {
    const localTheme = localStorage.getItem('localTheme');
    this.currentTheme = localTheme || 'default';
    this.themeService.changeTheme(this.currentTheme);

    this.themeService.onThemeChange()
      .pipe(
        map(({ name }) => name),
      )
      .subscribe((themeName) => {
        localStorage.setItem('localTheme', themeName);
      });
  }
}
